<template>
  <div class="w-100 h-100">
    <div id="all2" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup lang="ts">
import { useOptions } from "@/hook/useOptions";
import * as echarts from "echarts";

let option = {
  background: "transparent",

  legend: { show: false },
  grid: { left: "32%", right: "12%", top: "5%", bottom: "13%" },
  xAxis: [
    {
      name: "个",
      type: "value",
      show: false,
      axisLine: {
        //x轴坐标轴，false为隐藏，true为显示
        show: false,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "rgba(92,225,255,0.5)", // 设置分割线颜色为蓝色
          type: "dashed", // 设置分割线为虚线
        },
      },
      axisLabel: {
        fontSize: 20,
        interval: 0,
        fontFamily: "OPPOSans-Regular",
        color: "#667A8E",
      },
      nameTextStyle: {
        color: "#DEDEDE",
        fontSize: 20,
        fontFamily: "OPPOSans-Regular",
        padding: [0, 0, 30, 0], // 上, 右, 下, 左
      },
    },
  ],
  yAxis: [
    {
      show: false,
      splitLine: { show: false },
      axisLine: { show: false },
      type: "category",
      axisTick: { show: false },
      inverse: true,
    },
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
        formatter: function (value: any, index: any) {
          return value;
        },
      },

      data: <any>[],
    },
  ],
  series: [
    {
      show: true,
      name: "",
      type: "bar",
      data: <any>[],
      barWidth: 5, // 柱子宽度
      showBackground: true,
      label: {
        show: true,
        width: 200,
        offset: [0, 0],
        color: "rgba(255, 255, 255, 0.6)",
        fontFamily: "SourceHanSansCN-Normal",
        fontSize: 20,
        fontWeight: 500,
        position: "left",
        formatter: function (params: any) {
          return params.data.name;
        },
      },
      itemStyle: {
        show: true,
        barBorderRadius: [10, 10, 10, 10],
        formatter: function (params: any) {
          return params.data.name;
        },
        // color: {
        //     type: "linear",
        //     colorStops: [{ offset: 1, color: "rgba(30, 230, 231, 1)", }, { offset: 0, color: "rgba(63, 149, 206, 0.3)", },],
        // },
      },
      emphasis: { disabled: true },
    },
    {
      name: "",
      type: "scatter",
      emphasis: { scale: false },
      symbol: "rect",
      symbolSize: [3, 15], // 进度条白点
      itemStyle: {
        show: true,
        barBorderRadius: [10, 10, 10, 10],
        color: "#FFF",
        shadowColor: "rgba(255, 255, 255, 0.5)",
        shadowBlur: 5,
        borderWidth: 0,
        opacity: 1,
      },
      z: 2,
      data: <any>[],
      animationDelay: 500,
    },
  ],
};
onMounted(() => {});

const jsonData: any = inject("jsonData");
 const projectTypeList = [
    { label: "洪涝灾害", value: 0 },
    { label: "自然灾害", value: 1 },
    { label: "雨雪冰冻灾害", value: 2 },
    { label: "突发环境事件", value: 3 },
  ];
watch(
  () => jsonData.value,
  (val: any) => {
    const data = val.jsgl.xmlx;
    const types = projectTypeList;

    const dataList = types.map((item, index) => ({
      name: item.label,
      value: data[index],
    }));

    option.series[0].data = dataList.map((item) => ({
      ...item,
      itemStyle: {
        color: {
          type: "linear",
          colorStops: [
            { offset: 1, color: "rgba(30, 230, 231, 1)" },
            { offset: 0, color: "rgba(63, 149, 206, 0.3)" },
          ],
        },
      },
    }));
    option.series[1].data = dataList

    option.yAxis[1].data = dataList

    let myChart1 = echarts.init(document.getElementById("all2") as HTMLElement);
    myChart1.setOption(option);
  }
);
</script>

<style lang="less" scoped></style>
